
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>

<link href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css"
	rel="stylesheet">

<style type="text/css">
html {
	position: relative;
	min-height: 100%;
}

body {
	margin-bottom: 60px;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 60px;
	background-color: #f5f5f5;
}

.container {
	width: auto;
	max-width: 680px;
	padding: 0 15px;
}

.container .text-muted {
	margin: 20px 0;
}
</style>
</head>

<body>

	<div class="container">
		<div class="page-header">
			<h1>请使用支付宝或微信手机客户端扫一扫</h1>
		</div>
		<div class="main" align="center">
			<div class="inwrap">
				<h3>#扫码测试#</h3>
				<h5>
					<input type="radio" name="amount" id="amount" value="1"
						checked="checked"> 0.01 元&nbsp;&nbsp; <input type="radio"
						name="amount" id="amount" value="100"> 1.00 元&nbsp;&nbsp;
					<input type="radio" name="amount" id="amount" value="1000">
					10.00 元&nbsp;&nbsp; 任意: <input type="text" id="othAmt"
						style="width: 60px;" value=""> 元
				</h5>
				<div class="example">
					<div id="qrcode"></div>
					<div>
						<h3 id="vAmt" style="color: red">0.01元</h3>
					</div>
					<div>
						<h3 id="tips" style="color: #FFB800;"></h3>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script src="js/jquery1.21.1.min.js"></script>
	<script src="js/qrcode.min.js"></script>
	<script src="js/blurify.js"></script>
	<script src="js/layer/layer.js"></script>

	<script>
		var qrcode = new QRCode(document.getElementById("qrcode"), {
			width : 256,
			height : 256
		});

		//获得当前域名
		var HOST_URL = function() {
			var port = location.port;
			var hostUrl = "http://";
			if (port == 80) {
				hostUrl += location.hostname;
			} else {
				hostUrl += location.host;
			}
			return hostUrl;
		}();

		var timestamp = Date.parse(new Date());

		function makeCode() {
			var elText = document.getElementById("othAmt");
			var amt = $.trim(elText.value);
			var vAmt = (amt / 1).toFixed(2);
			if (amt == '') {
				amt = $("input[name='amount']:checked").val();
				vAmt = (amt / 100).toFixed(2);
			}
			if (vAmt == 'NaN' || vAmt <= 0) {
				alert("输入金额不正确");
				$("#othAmt").val('');
				return;
			}
			$("#vAmt").text(vAmt + '元');
			var qrText = HOST_URL + '/PayDemo/toPay.html?amount=' + vAmt
					+ "&timestamp=" + timestamp;
			qrcode.makeCode(qrText);
		}

		makeCode();
		$("#qrcode").attr("title", "请使用支付宝或微信手机客户端扫一扫");

		$("input:radio").click(function() {
			$("#othAmt").val('');
			makeCode();
		});

		$("#othAmt").on("blur", function() {
			makeCode();
		}).on("keydown", function(e) {
			if (e.keyCode == 13) {
				makeCode();
			}
		});

		var socket;
		function openSocket() {
			if (typeof (WebSocket) == "undefined") {
				console.log("您的浏览器不支持WebSocket");
			} else {
				console.log("您的浏览器支持WebSocket");
				var socketUrl = HOST_URL + "/PayWebSocket/" + timestamp;
				//使用内网穿透情况下使用
				//var socketUrl = "http://127.0.0.1:8080/PayWebSocket/" + timestamp;
				socketUrl = socketUrl.replace("https", "ws").replace("http",
						"ws");
				console.log(socketUrl);
				if (socket != null) {
					socket.close();
					socket = null;
				}
				socket = new WebSocket(socketUrl);
				//打开事件
				socket.onopen = function() {
					console.log("websocket已打开");
					//socket.send("这是来自客户端的消息" + location.href + new Date());
				};
				//获得消息事件
				socket.onmessage = function(msg) {
					console.log(msg.data);
					//发现消息进入    开始处理前端触发逻辑
					if (msg.data == "SCANNED") {
						$("#tips").text("请在APP内继续完成支付");
						new blurify({
							images : document.querySelectorAll('#qrcode'),
							blur : 3,
							mode : 'auto',
						});
					} else if (msg.data == "PAID") {
						layer.alert('支付成功!');
						$("#tips").text("支付成功!");
					}
				};
				//关闭事件
				socket.onclose = function() {
					console.log("websocket已关闭");
				};
				//发生了错误事件
				socket.onerror = function() {
					console.log("websocket发生了错误");
				}
			}
		}
		openSocket();

		function sendMessage() {
			if (typeof (WebSocket) == "undefined") {
				console.log("您的浏览器不支持WebSocket");
			} else {
				console.log("您的浏览器支持WebSocket");
				console.log('{"toUserId":"' + $("#toUserId").val()
						+ '","contentText":"' + $("#contentText").val() + '"}');
				socket.send('{"toUserId":"' + $("#toUserId").val()
						+ '","contentText":"' + $("#contentText").val() + '"}');
			}
		}
	</script>

</body>
</html>
